<template>
  <div class="s-box">
    <!-- 导航 -->
    <van-nav-bar title="交易明细" left-text="" class="space-nav" :border="false" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- 正文 -->
    <div class="s-box-start nav-top">
      <div class="s-box-start__nav">
        <!-- 选项卡 -->
        <div class="d-flex px-2 justify-content-around">
          <div class="topic-nav" :class="ntype == '1' ? 'topic-active' : ''" @click="nftType(1)">
            收入明细
          </div>
          <div class="topic-nav" :class="ntype == '2' ? 'topic-active' : ''" @click="nftType(2)">
            支出明细
          </div>
        </div>
        <div class="container">
          <!-- NFT专题 -->
          <van-config-provider :theme-vars="themeVars">
            <van-list :loading="loading" :finished="finished" finished-text="" @load="onLoad">
              <van-cell v-for="(item, index) in listItems" :key="index" :border="false">
                <div class="bgimg-1">
                  <van-row>
                    <van-col span="24" class="d-flex flex-column">
                      <div class="p-2">
                        <h4>{{ item.cardName }}</h4>
                      </div>
                      <div class="px-2">
                        <van-row>
                          <van-col span="12">{{
                            ntype == 1 ? "卖出" : "购买"
                          }}</van-col>
                          <van-col span="12" class="text-end">{{ ntype == 1 ? "+" : "-" }}
                            {{ item.tradePrice }}</van-col>
                        </van-row>
                      </div>
                      <div class="p-2">{{ item.createTime }}</div>
                    </van-col>
                  </van-row>
                </div>
              </van-cell>
            </van-list>
          </van-config-provider>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { apis, postRequest } from '@/common/ts/request'
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const themeVars = {
      cellBackgroundColor: 'transparent',
      cellHorizontalPadding: 0,
    }
    const router = useRouter()

    const state = reactive({
      spaceNavMore: false,
      ntype: 1,
      loading: false,
      finished: false,
      refreshing: false,
      listItems: [],
      page: 1,
      pages: 0,
      isAppend: false,
    })

    const loadData = async () => {
      const { data } = await postRequest(apis.transactionList, {
        type: state.ntype,
        size: 10,
        current: state.page,
      })

      console.log(data)
      
      if(state.page == data.current && !state.isAppend){
        state.isAppend = true;
        state.listItems = state.listItems.concat(data.list)
      }

      state.loading = false
      state.pages = data.pages
      if (state.page >= data.pages) state.finished = true
    }

    const onLoad = () => {
      if (!state.refreshing && state.page < state.pages) {
        console.log(state.page)
        console.log(state.pages)
        state.page = state.page + 1
        state.isAppend = false;
      }

      if (state.refreshing) {
        state.listItems = []
        state.refreshing = false
      }
      loadData()
    }
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.page = 1
      state.isAppend = false;
      onLoad()
    }

    const onClickLeft = () => history.back()

    const nftType = (t: number) => {
      state.ntype = t
      console.log(t)
      onRefresh()
    }
    const toDetail = (id: number) => {
      router.push({ path: '/nft-detail', query: { id } })
    }

    return {
      ...toRefs(state),
      themeVars,
      onClickLeft,
      onLoad,
      nftType,
      toDetail,
      onRefresh,
    }
  },
}
</script>

<style lang="scss" scoped>
.topic-nav {
  padding: 0.3em 0;
  margin: 0.5em 1em;
}

.topic-active {
  color: #164ed2;
  border-bottom: 4px solid #164ed2;
}
</style>
